<template>
	<view class="content">
		<view class="u-page">
			<u-navbar :is-back="false" :background="{background: '#000'}" :height="10" :border-bottom="false" hover-class="none">
			</u-navbar>
			<view style="height: 40rpx;"></view>
			<view class="top-wrap">
				<view class="infos flex-c flex-start" style="color: #D2D2D2;">
					<view class="avatarinfo flex-col flex-c">
						<u-avatar size="140" @click="picops4click" :src="HOSTURL +  userinfo.head_300"></u-avatar>
					</view>
					<view class="tags" style="width: 290rpx; text-align: left;">
						<view style="color: #fff;">
							{{userinfo.name}}
						</view>
						<view class="tag info">{{userinfo.age}}岁{{userinfo.city!=''?' · '+userinfo.city:''}}{{userinfo.occupation!=''?' · '+userinfo.occupation:''}}</view>
					</view>
					<view class="" style="font-size: 20rpx;display: flex;align-items: center;" @click="nav('profile')" >
						<view style="margin-right: 10rpx;">资料待完善</view>
						<u-icon name="arrow-right" color="#D2D2D2" size="20"></u-icon>
					</view>
				</view> 
				<view class="options">
					<view class="option" style="border-right: 1rpx solid #fff;" @click="nav('see_list')">
						<!-- wallet -->
						<view class="label">
							{{likes.see}}  查看过我
						</view>
					</view>
					<view class="option" style="border-right: 1rpx solid #fff;" @click="nav('collect','types',1)">
						<view class="label">
							{{likes.like1}}  我喜欢的
						</view>
					</view>
					<view class="option" @click="nav('collect','types',2)">
						<view class="label">
							{{likes.like}}  喜欢我的
						</view>
					</view>
				</view>
			</view>
			<view class="listitem" @click="nav('member')" v-if="platform!='ios'"
				:style="'background: url(../../static/wode/beijing.png);box-sizing: border-box;background-size: 100% 100%;'">
				<view class="vip">
					<view>
						<view style="display: flex;align-items: center;">
							<image src="../../static/wode/tubiao.png" style="width: 45rpx;height: 49rpx;margin-right: 20rpx;"></image>
							<view style="font-size: 30rpx;">会员VIP</view>
						</view>
						<view style="font-size: 25rpx;margin-top: 20rpx;">开通VIP享受超级特权</view>
					</view>
					<view class="anniu">
						<view style="margin-right: 10rpx;">立即开通</view>
						<u-icon name="arrow-right" color="#19151E" size="20"></u-icon>
					</view>
				</view>
				<!-- <view class="left">
					VIP <text>同城悦圈</text>
				</view>
				<view class="right">
					<text class="fontsize12" v-if="userinfo.is_vip > 0">{{userinfo.vip_end_datetime}}到期</text>
					<text class="fontsize12" v-if="userinfo.is_vip == 0 || !userinfo.is_vip">升级会员尊享特权</text>
					<view class="btn" v-if="userinfo.is_vip == 0 || !userinfo.is_vip">立即开通</view>
				</view> -->
			</view>
			<view style="height: 40rpx;"></view>
			<view class="u-cell-item">
				<u-cell-item :border-bottom="false" @click="nav('renzheng')" hover-class="none" title="认证中心"
					:value="userinfo.is_identity_authentication == 0?'马上认证':userinfo.is_identity_authentication == 1?'审核中':userinfo.is_identity_authentication == 2?'认证成功':'认证失败'">
					<image src="../../static/wode/renzheng.png" class="cell-icon" style="width: 50rpx;height: 38rpx;" slot="icon"></image>
				</u-cell-item>
			</view>
			
			<view class="u-cell-item">
				<u-cell-item :border-bottom="false" hover-class="none" @click="nav('photos')" title="我的相册" :value="0+'张'">
					<image src="../../static/wode/xiangce.png" class="cell-icon" style="width: 50rpx;height: 40rpx;" slot="icon"></image>
				</u-cell-item>
			</view>
			<view class="u-cell-item">
				<u-cell-item :border-bottom="false" hover-class="none" title="动态" @click="nav('mydymanic')">
					<image src="../../static/wode/dongtai.png" class="cell-icon" style="width: 50rpx;height: 44rpx;" slot="icon"></image>
				</u-cell-item>
			</view>
			<!-- <view class="u-cell-item" v-if="platform!='devtools'">
				<u-cell-item :border-bottom="false" hover-class="none" title="微信号" @click="nav('wx')" :value="linkauth">
					<image src="../../static/wode/weixin.png" class="cell-icon" style="width: 50rpx;height: 42rpx;" slot="icon"></image>
				</u-cell-item>
			</view> -->
			<view class="u-cell-item">
				<u-cell-item :border-bottom="false" hover-class="none" title="微信解锁记录" @click="nav('wx_unlock')">
					<image src="../../static/wode/jilu.png" class="cell-icon" style="width: 45rpx;height: 45rpx;" slot="icon"></image>
				</u-cell-item>
			</view>
			
			<view class="u-cell-item">
				<u-cell-item :border-bottom="false" hover-class="none" title="邀请有礼" @click="nav('yaoqing')">
					<image src="../../static/wode/yaoqing.png" class="cell-icon" style="width: 48rpx;height: 48rpx;" slot="icon"></image>
				</u-cell-item>
			</view>
			<view class="u-cell-item">
				<u-cell-item :border-bottom="false" @click="nav('setting')" hover-class="none" title="设置">
					<image src="../../static/wode/shezhi.png" class="cell-icon" style="width: 48rpx;height: 48rpx;" slot="icon"></image>
				</u-cell-item>
			</view>
			<view class="u-cell-item" v-if="!userinfo.yqr">
				<u-cell-item :border-bottom="false" hover-class="none" title="填写邀请码" @click="yqmmodal = true">
					<image src="/static/membericon/ic_file.png" class="cell-icon" style="width: 48rpx;height: 48rpx;" slot="icon"></image>
				</u-cell-item>
			</view>
			<view class="u-cell-item">
				<u-cell-item :border-bottom="false" hover-class="none" title="客服微信" @click="kefu()">
					<image src="/static/membericon/ic_file.png" class="cell-icon" style="width: 48rpx;height: 48rpx;" slot="icon"></image>
				</u-cell-item>
			</view>
		</view>
		<u-action-sheet :list="picopslist" @click="picopsclick" v-model="picopsshow"></u-action-sheet>
		<u-action-sheet :list="picops2list" @click="picops2click" v-model="picops2show"></u-action-sheet>
		<u-action-sheet :list="picops3list" @click="picops3click" v-model="picops3show"></u-action-sheet>
		<!-- <u-action-sheet :list="picops4list" @click="picops4click" v-model="picops4show"></u-action-sheet> -->
		<!-- <u-tabbar :border-top="false" bg-color="#1B1A1F" active-color="#A87B38" inactive-color="#CCC" v-model="current" :list="list" :mid-button="false"></u-tabbar> -->
		
		<u-mask :show="discussshow" @click="discussshow = false">
			<view class="discuss">
				<view class="rect" @tap.stop>
					<view class="hd">
						<image @click="discussshow = false" src="../../static/x.png" class="close_img" />
					</view>
					<view class="ping-wrap">
						<view class="list" v-for="(item, index) in ffList">
							<text class="name">{{item.content}}</text>
							<view class="star-wrap" id="star-wrap">
								<view class="no-star flex">
									<i class="noscore" :class="{'half-score': item.num>0, 'score': item.num>0.5}"></i>
									<i class="noscore" :class="{'half-score': item.num>1, 'score': item.num>1.5}"></i>
									<i class="noscore" :class="{'half-score': item.num>2, 'score': item.num>2.5}"></i>
									<i class="noscore" :class="{'half-score': item.num>3, 'score': item.num>3.5}"></i>
									<i class="noscore" :class="{'half-score': item.num>4, 'score': item.num>4.5}"></i>
								</view>
							</view>
						</view>
					</view>
					<view class="ft">
						<view class="nmpj">评价{{userinfo.pingjia_count}} 总和评分{{score}}</view>
					</view>
				</view>
			</view>
		</u-mask>
		<u-mask :show="gzhshow">
			<view class="gzh flex-col flex-c">
				<u-image width="200" height="200" :src="ewm" error-icon="/static/error-img.png"></u-image>
				<text>使用微信扫描二维码，添加客服哦~</text>
				<view class="btnplain" @click="savegzh">保存二维码</view>
				<image class="close" @click="gzhshow = false" src="../../static/close2.png"></image>
			</view>
		</u-mask>
		<u-modal v-model="yqmmodal" show-cancel-button @confirm="inputYQM">
			<view class="slot-content">
				<input type="text" placeholder="请输入邀请码" v-model="yqm">
			</view>
		</u-modal>
		<u-modal v-model="photolistbyprice" show-cancel-button title="请输入金额" @cancel="picprice = ''" @confirm="setpicprice">
			<view class="slot-content">
				<input type="digit" placeholder="请设置非会员进入你的相册的金额" v-model="picprice">
			</view>
		</u-modal>
		<u-modal v-model="rmodal" content="是否确定删除该图？" show-cancel-button @cancel="ridx = -1" @confirm="removeconfirm"></u-modal>
	</view>
</template>

<script>
	export default {
		data() { 
			return {
				yqm: '',
				yqmmodal: false,
				gzhshow: false,
				HOSTURL:this.$HOSTURL,
				discussshow:false,
				score: [],
				ffList: [],
				picopslist:[{text:'照片'},{text:'视频'}],
				picopsshow:false,
				picops2list:[],
				picops2show:false,
				picyinsi:'公开（推荐）',
				picops3list:[{text:'公开（推荐）'},{text:'查看付费相册'},{text:'隐身'}],
				picops3show:false,
				addpic:[-1,-1],
				images:[],
				likes:[],
				userinfo:{},
				ridx: -1,
				rmodal: false,
				photolistbyprice: false,
				picprice: '',
				ewm: '',
				platform:''
			}
		},
		// #ifdef MP
		onShareAppMessage() {
			const url = '/pages/index/index?share_id='+this.$store.state.userid
		    return {
		        title: this.$store.state.userinfo.name + "分享了一个链接",
		        path: url,
		        params: {},
				success(res){
				    uni.showToast({
				         title:'分享成功',
				        })
						console.log(url)
				    },
					
				fail(res){
				     uni.showToast({
				        title:'分享失败',
				        icon:'none'
					})
				}
				
		    };
		},
		// #endif
		onLoad() {
			
			if(!this.hasLogin){
				return uni.redirectTo({
					url:'/pages/appview/index'
				})
			}
			uni.getSystemInfo({
				success:(res) => {
					console.log(res)
					this.platform = res.platform  // 14.3
				}
			})
			this.$store.dispatch('setOnline',1)
		},
		onShow() {
			console.log(this.$store.state.userinfo)
			console.log("会员资料")
			this.userinfo = this.$store.state.userinfo
			//this.picyinsi = this.picops3list[res.img_auth].text
			this.getuserimglist()
			this.getuserlike()
			this.$store.dispatch('setOnline',1)
			if(!this.hasLogin){
				return uni.redirectTo({
					url:'/pages/appview/index'
				})
			}
			this.getuserinfo()
			
		},
		onPullDownRefresh() {
			this.$store.dispatch('setOnline',1)
			
			this.getuserimglist()
			setTimeout(()=>{
				uni.stopPullDownRefresh()
			},1000)
		},
		watch:{
			async discussshow(newval, oldval){
				if(newval){
					const {data:res} = await this.$Request({
						url:'apis/Home/Dymanic/evalist',
						data:{
							main_id: this.$store.state.userid
						}
					})
					if (res && res.code == 200) {
						this.score = res.score;
						this.ffList = res.data;
					}
				}
			},
			async gzhshow(newval, oldval){
				if(newval){
					const {data:res} = await this.$Request({
						url:'api/member/config'
					})
					if (res && res.code == 200) {
						this.ewm = res.data.qrcode ? this.$HOSTURL + res.data.qrcode : '/static/error-img.png'
					}
				}
			}
		},
		methods: {
			preview(idx){
				if(this.images[idx].types==1){// 看图
					uni.previewImage({
						urls:[this.$formatImage(this.images[idx].pic[0])]
					})
				}else{
					this.nav('webview','video',this.$formatImage(this.images[idx].pic[0]))
				}
			},
			remove(idx){
				this.ridx = idx
				this.rmodal = true
			},
			async removeconfirm(){
				const {data:res} = await this.$Request({
					url:'api/Userimg/delImg',
					data: {
						img_id: this.images[this.ridx].id
					}
				})
				if(res.code==200){
					this.$u.toast('删除成功')
					this.images.splice(this.ridx, 1)
				}
			},
			
			// 获取相册列表
			async getuserimglist(){
				const { data: res } = await this.$Request({
					url:'api/Userimg/lists',
					data:{
						user_id: this.$store.state.userid,
						to_user: this.$store.state.userid
					}
				})
				console.log(res);
				this.images = res.result
			},
			// 获取我喜欢的和喜欢我的
			async getuserlike(){
				const { data: res } = await this.$Request({
					url:'api/Userimg/likes',
					data:{
						user_id: this.$store.state.userid,
						to_user: this.$store.state.userid
					}
				})
				this.likes = res.result
				console.log(res);
				
			},
			
			// 清空焚毁
			async resetburn(){
				const { data: res } = await this.$Request({
					url:'apis/index.php/Home/User/resetburn',
					data:{
						user_id: this.$store.state.userid
					}
				})
				if(res.code===200){
					this.userinfo.burn = 0
					uni.showToast({
						title:'恢复成功'
					})
					
				}else{
					uni.showToast({
						title:res.msg,
						icon:'none'
					})
				}
			},
			// 选择上传图片或视频
			picopsclick(index){
				this.addpic[0]=index
				switch(index){
					case 0:
						this.picops2list = [{text:'公开（推荐）'},{text:'阅后即焚（查看2秒后焚毁）'}]
						break;
					case 1:
						this.picops2list = [{text:'公开（推荐）'},{text:'阅后即焚（查看30秒后焚毁）'}]
						break;
				}
				this.picops2show = true
			},
			picops2click(index){
				var _this = this
				this.addpic[1]=index
				switch(this.addpic[0]){
					case 0:
						uni.chooseImage({
							count: 1,
							success(chooseImageRes) {
								const tempFilePaths = chooseImageRes.tempFilePaths;
								_this.$Upimg({
									image: tempFilePaths[0]
								},(res)=>{
									_this.pushImg(res, '')
								})
							}
						})
						break;
					case 1:
						uni.chooseMedia({
							mediaType:['video'],
							count:1,
							success(res){
								_this.$Upvideo(res.tempFiles[0].tempFilePath, function (v) {
									_this.$Upimg({
										image: res.tempFiles[0].thumbTempFilePath
									}, function (u) {
										_this.pushImg(v, u);
									})
								})
							}
						})
						break;
				}
			},
			async inputYQM(){
				const {data:res} = await this.$Request({
					url:'api/user/bindInvite',
					data:{
						user_id: this.$store.state.userid,
						invite: this.yqm
					}
				})
				this.$u.toast(res.msg)
				if(res.code==200){
					this.yqm = ''
					this.getuserinfo()
				}
				
			},
			// 上传相册
			async pushImg(url, cover){
				const {data:res} = await this.$Request({
					url:'api/upload/upload',
					data: {
						user_id: this.$store.state.userid,
						burn: this.addpic[1],
						types: this.addpic[0] + 1, // 1 图片 2视频
						cover: cover, // 视频封面
						photo_album: url
					}
				})
				if(res.code==200){
					this.getuserimglist()
				}
			},
			savegzh(){
				var that = this;
				// #ifdef H5
				let aLink = document.createElement('a')
				let evt = document.createEvent("HTMLEvents")
				evt.initEvent("click", true, true)
				aLink.download = 'gzhqrcode'
				aLink.href = that.ewm
				aLink.dispatchEvent(new MouseEvent('click', {
					bubbles: true,
					cancelable: true,
					view: window
				})) //兼容火狐
				// #endif
				// #ifndef H5
					const permission = 'android.permission.WRITE_EXTERNAL_STORAGE'; // 要检查的权限 
					plus.android.checkPermission(
					  permission,
					  granted => {
						  console.log(granted);
						if (granted.checkResult == '-1') {
						  uni.showModal({
							title: '提示',
							content: '开心小圈对存储空间/照片/相机/摄像头权限申请说明：便于您使用该功能上传您的照片/图片/视频及用于更换头像、意见反馈、举报用户、保存相册、发布动态、下载与客服沟通等场景中读取和写入相册和文件内容。',
							success: function (res) {
								uni.downloadFile({
								    url: that.ewm,
								    success: (res) => {
								        if (res.statusCode === 200) {
											uni.saveImageToPhotosAlbum({
												filePath: res.tempFilePath,
												success: function () {
													uni.showToast({
														title:'保存成功'
													})
												}
											});
								        }
								    }
								});
							},
						  })
						}else{
							
							uni.downloadFile({
							    url: that.ewm,
							    success: (res) => {
							        if (res.statusCode === 200) {
										uni.saveImageToPhotosAlbum({
											filePath: res.tempFilePath,
											success: function () {
												uni.showToast({
													title:'保存成功'
												})
											}
										});
							        }
							    }
							});
						}
					  },
					  error => {
						console.error('Error checking permission:', error.message);
					  }
					);
				// #endif
			},
			// 相册隐私
			picops3click(index){
				var _this = this
				if (index == 1) {
					if (this.userinfo.sex == '女' && this.userinfo.is_identity_authentication != 2) {
						return uni.showModal({
							title:'查看相册付费',
							content:'您还未认证，需要你认证后才可以去设置该权限。该权限可以设置非会员进入你的相册的金额',
							showCancel:true,
							confirmText:'我要认证',
							success(res){
								if(res.confirm){
									_this.nav('renzheng')
								}
							}
						})
					} else if (this.userinfo.sex == '男' && this.userinfo.is_vip == 0) {
						return uni.showModal({
							title:'查看相册付费',
							content:'您还不是会员，成为会员后才可以去设置该权限。该权限可以设置非会员进入你的相册的金额',
							showCancel:true,
							confirmText:'成为会员',
							success(res){
								if(res.confirm){
									_this.nav('member')
								}
							}
						})

					} else {
						this.photolistbyprice = true
					}
				}else{
					this.picyinsi = this.picops3list[index].text
					this.$Request({
						url:'apis/index.php/home/User/imgauth',
						data:{
							user_id:this.$store.state.userid,
							auth:index
						}
					})
				}
			},
			setpicprice(){
				var price = this.picprice || 0
				if(price<=0){
					return this.$u.toast('金额不能小于0')
				}
				this.picyinsi = this.picops3list[1].text
				this.$Request({
					url:'apis/index.php/home/User/imgauth',
					data:{
						user_id:this.$store.state.userid,
						auth:1,
						price:price
					}
				})
			},
			// 换头像
			picops4click(index){
				var _this = this
				const permission = 'android.permission.WRITE_EXTERNAL_STORAGE'; // 要检查的权限
				const android_camera = 'android.permission.CAMERA';
				plus.android.checkPermission(
				  permission,
				  granted => {
					  console.log(granted);
					if (granted.checkResult == '-1') {
					  uni.showModal({
						title: '提示',
						content: '开心小圈对存储空间/照片/相机/摄像头权限申请说明：便于您使用该功能上传您的照片/图片/视频及用于更换头像、意见反馈、举报用户、保存相册、发布动态、下载与客服沟通等场景中读取和写入相册和文件内容。',
						success: function (res) {
							
							uni.chooseImage({
								count:1,
								success: function(res){
									const tempFilePaths = res.tempFilePaths;
									_this.$Upimg({
										image: tempFilePaths[0]
									}, async (uploadFileRes) => {
										const { data: res } = await _this.$Request({
											url:'api/user/editHead',
											data:{
												user_id: _this.$store.state.userid,
												head: uploadFileRes
											}
										})
										if(res.code==200){
											_this.getuserinfo()
											wx.showToast({
												title:'修改成功'
											})
										}else{
											_this.$u.toast(res.result.error)
										}
									})
								}
							})
						},
					  })
					}else{
						uni.chooseImage({
							count:1,
							success: function(res){
								const tempFilePaths = res.tempFilePaths;
								_this.$Upimg({
									image: tempFilePaths[0]
								}, async (uploadFileRes) => {
									const { data: res } = await _this.$Request({
										url:'api/user/editHead',
										data:{
											user_id: _this.$store.state.userid,
											head: uploadFileRes
										}
									})
									if(res.code==200){
										_this.getuserinfo()
										wx.showToast({
											title:'修改成功'
										})
									}else{
										_this.$u.toast(res.result.error)
									}
								})
							}
						})
					}
				  },
				  error => {
					console.error('Error checking permission:', error.message);
				  }
				);
			},
			nav(url, params, value) {
				if(url=='wx'){
					if (this.userinfo.link_auth == -1) {
						return this.$u.toast('审核中')
					}
				}
				if(url=='renzheng'){
					if( this.userinfo.is_identity_authentication == 0){
						// #ifdef MP-WEIXIN
							return this.$u.toast('请下载开心小圈APP进行认证')
						// #endif
					}
					if (this.userinfo.is_identity_authentication == 1) {
						return this.$u.toast('审核中')
					}
					if (this.userinfo.is_identity_authentication == 2) {
						return this.$u.toast('已经认证成功')
					}
				}
				if(url=='see_list'){
					uni.navigateTo({
						url: '/pages/collect/see_list'
					})
					return;
				}
				uni.navigateTo({
					url: `/pages/${url}/index${params?'?'+params+'='+value:''}`
				})
			},
			kefu(){
				uni.navigateTo({
					url: '/pages/webview/index?url=https://yzf.qq.com/xv/web/static/chat/index.html?sign=37ef9b97d7760a9025179be61db4b4340950fb758bacc0ca2c8c2e739f211b0d9695e30234bfd8878997e4f2719775ed4b53af7b'
				})
			},
			getuserinfo(){
				var obj = {dy_program:1, dy_conditions: 1}
				this.$store.dispatch('getuserinfo').then(res=>{
					for (var key in this.userinfo) {
						this.userinfo[key] = res[key] == 'null' ? '' : res[key] || '';
						if(obj[key]){
							if(typeof res[key] != 'string'){
								this.userinfo[key] = res[key].join(',')
							}
						}
					}
					this.head = this.HOSTURL + res.head_portrait;
				})
			},
		},
		computed:{
			hasLogin() {
				return this.$store.state.hasLogin 
			},
			list(){
				return this.$store.state.tabbarlist
			},
			current(){
				return this.$store.state.tabbarcurrent
			},
			linkauth(){
				switch(this.userinfo.link_auth){
					case -1:
						return '审核中'
						break;
					case -2:
						return '已拒绝'
						break;
					case 1:
						return '修改微信需客服核实'
						break;
					default:
						return '立即填写'
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		min-height: 100vh;
		background-color: #000;
		.slot-content{
			padding: 60rpx 30rpx;
			input{
				text-align: center;
			}
		}
		.slot-wrap {
			// display: flex;
			// align-items: center;
			// justify-content: space-between;
			text-align: center;
			width: 100vw;
			flex: 1;
			// padding: 0 30rpx;
			color: #A87B38;
			image{
				height: 60rpx;
				&:last-child{
					visibility: hidden;
				}
			}
		}
		.noscore {
			background-image: url('/static/ic_star_7.png');
			background-size: 100%;
			width: 22.5px;
			height: 15px;
			position: relative;
		}

		.half-score {
			background-image: url('/static/ic_star_3.png');
		}

		.score {
			background-image: url('/static/ic_star_8.png');
		}

		.top-wrap {
			width: 90%;
			margin: auto;
			padding: 20rpx 0;
			margin-bottom: 20rpx;
			position: relative;
			text-align: center;

			.infos{
				padding: 0 20rpx;
				.avatarinfo{
					margin-right: 60rpx;
					text{
						color: #fff;
						font-size: 24rpx;
						margin-top: 12rpx;
					}
				}
			}
			image {
				width: 180rpx;
				height: 180rpx;
				border-radius: 20rpx;
			}

			.tags {
				// margin-top: 12rpx;
				// width: 60vw;
				.tag {
					padding: 2rpx 10rpx;
					margin:4rpx 0rpx 12rpx 0rpx;
					border-radius: 8rpx;
					display: inline-block;
					font-size: 24rpx;
					color: #fff;
					// background: rgb(28, 27, 33);

				}
			}

			.options {
				margin-top: 60rpx;
				// padding: 60rpx 60rpx 10rpx;
				display: flex;
				justify-content: center;

				image {
					width: 70rpx;
					height: 70rpx;
				}
				
				.option{
					width: 220rpx;
					height: 40rpx;
					font-size: 25rpx;
					display: flex;
					align-items: center;
					justify-content: center;
				}
				
				.label {
					color: #fff;
					font-size: 24rpx;
				}
			}
		}

        .listitem {
			height: 141rpx;
			width: 90%;
			margin: auto;
			.vip{
				width: 90%;
				height: 100%;
				margin: auto;
				display: flex;
				align-items: center;
				justify-content: space-between;
				color: #19151E;
				
				.anniu{
					background-color: #FDEBC9;
					width: 160rpx;
					height: 50rpx;
					border-radius: 20rpx;
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}
        }

		.u-cell-item {
			width: 90%;
			margin: 30rpx auto;
			height: 80rpx;
			display: flex;
			align-items: center;
			u-cell-item{
				width: 100%;
			}
			.cell-icon{
				margin-right: 20rpx;
			}
			/deep/.u-cell_title{
				color: #FFFFFF;
			}
			/deep/.u-cell__value{
				color: #CCCBCB;
			}
			/deep/.u-icon__icon{
				color: #FFFFFF;
			}
		}

		.huifu {
			color: rgb(213, 157, 81);
			margin-left: 100rpx;
		}

		.mt20 {
			margin-top: 20rpx;
		}
		.pushImg2 {
		    // display: flex;
		    // flex-wrap: wrap;
		    padding: 20rpx 14rpx 0;
			.li {
			    position: relative;
			    margin: 20rpx 20rpx 0 0;
			    // display: flex;
			    // justify-content: center;
			    // align-items: center;
				.img {
				    height: 160rpx;
				    width: 160rpx;
				    overflow: hidden;
				    // display: flex;
				    // align-items: center;
				    // justify-content: center;
					border-radius: 16rpx;
					image{
						height: 160rpx;
						width: 160rpx;
					}
				}
				.icon{
					position: absolute;
				}
				.close{
					position: absolute;
					top:-20rpx;
					right: -20rpx;
					width:40rpx;
					height:40rpx;
				}
				.hot {
					position: absolute;
					left: 0;
					top: 0;
					width: 40rpx;
					height: 40rpx;
				}
				.showImg_permission {
				    position: absolute;
				    bottom: 0;
				    width:160rpx;
				    text-align: center;
				    background: rgba(153, 101, 255, 0.5);
				    color: #fff;
				    padding: 8rpx 0;
				    font-size: 20rpx;
				}
				.add {
				    /* padding: 20rpx; */
				    width: 156rpx;
				    height: 156rpx;
				    border: 2rpx dashed #ccc;
				    border-radius: 10rpx;
				    /* margin-bottom: 5rpx; */
				    display: flex;
				    align-items: center;
				    justify-content: center;
					image{
						width: 52rpx;
						height: 52rpx;
					}
				}
			}
		}
		
		.discuss {
			display: flex;
			align-items: center;
			justify-content: center;
			height: 100%;
		
			.rect {
				width: 70%;
				border-radius: 20rpx;
				padding: 0 30rpx;
				// height: 120px;
				background: linear-gradient(45deg, #d9a14e, #b57e2c);
				.hd{
					position: relative;
					text-align: center;
					font-weight: bold;
					height: 80rpx;
					font-size: 28rpx;
					.close_img{
						width: 18px;
						height: 18px;
						position: absolute;
						top: 10px;
						right: 10px;
					}
				}
				
				.ping-wrap {
					max-height: 50vh;
					overflow-y: auto;
					.list {
						display: flex;
						align-items: center;
						background: #000;
						border-radius: 3px;
						padding: 5px;
						margin-bottom: 7px;
						.name {
							margin-right: 10px;
							font-size: 14px;
							width: 50px;
							color: rgb(168, 123, 56);
						}
					}
		
				}
				
				.ft{
					padding: 16px 10px 14px;
					.nmpj{
						background: #000;
						color: #fff;
						text-align: center;
						line-height: 3;
						border-radius: 12rpx;
					}
					.ju_bao{
						font-size: 24rpx;
						color: rgb(168, 123, 56);
						padding-top: 28rpx;
						text-align: center;
					}
				}
			}
		}
		.gzh{
			background-color: #000000;
			border: 3rpx solid rgb(213, 157, 81);
			width: 60vw;
			margin: 20vh 20vw;
			padding: 40rpx 40rpx;
			border-radius: 20rpx;
			position: relative;
			image{
				width: 200rpx;
				height: 200rpx;
			}
			text{
				color: rgb(213, 157, 81);
				padding: 100rpx 0 70rpx 0;
				font-size: 28rpx;
			}
			.close{
				width: 60rpx;
				height: 60rpx;
				position: absolute;
				bottom: -100rpx;
				left: calc(50% - 30rpx);
			}
			.btnplain{
				border: 3rpx solid rgb(213, 157, 81);
				color: rgb(213, 157, 81);
				width: 100%;
				text-align: center;
				padding: 10rpx;
				font-size: 24rpx;
				border-radius: 60rpx;
			}
		}
	}
</style>
